<template>
  <div class="top">
    <van-nav-bar title="分类" />
  </div>
  <div class="caidan">
    <div class="one">
      <ul>
        <li v-for="(menu,index) in TreeData" :key="index" class="one-ys" :class="{ 'active': activeIndex === index }" @click="clickList(index)">
          <p>{{ menu.name }}</p>
        </li>
      </ul>
    </div>
    <div class="two" ref="itemList" @scroll="onScroll">
      <ul>
        <li v-for="menu in TreeData" :key="menu.id" class="two-ys">
          <p class="title">{{ menu.name }}</p>
          <ul class="two-item">
            <li v-for="item in menu.children" :key="item.id">
              <router-link :to="{name:'GoodsList',params:{category_id:item.id}}">
                <div class="img1">
                  <img :src="item.picture" alt="" />
                </div>
                <p class="two-p">{{ item.name }}</p>
              </router-link>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref,watch,nextTick } from "vue";
import { getcategory } from "../api";

const TreeData = ref([]);
const rightLiTops = ref([]);
const activeIndex = ref(0);
const itemList = ref(null);

const getTreeData = (data) => {
  var TreeData = [];
  data.map((item) => {
    if (item.pid == 0) {
      item.children = [];
      TreeData.push(item);
    } else {
      var findItem = TreeData.findIndex((ite) => ite.id === item.pid);
      TreeData[findItem].children.push(item);
    }
  });
  return TreeData;
};

onMounted(() => {
  loadcategory().then(() => {
    nextTick(() => {
      initRightHeight();
      if (TreeData.value.length > 0) {
        clickList(0);
      }
    });
  });
});

const loadcategory = async () => {
  let data = await getcategory();
  TreeData.value = getTreeData(data);
  initRightHeight();
};

const clickList=(index)=>{
 activeIndex.value = index; 
  const itemListElement = itemList.value;
  if (itemListElement) {
    itemListElement.classList.add('scroll-transition');
    const targetTop = rightLiTops.value[index];
    nextTick(() => {
      itemListElement.scrollTop = targetTop;
      itemListElement.classList.remove('scroll-transition');
    });
  }
}

const initRightHeight = () => {
  const itemArray = [];
  let top = 0;
  const allList = itemList.value.getElementsByClassName('two-ys');
  Array.from(allList).forEach((li, idx) => {
    if (idx === 0) {
      itemArray.push(0);
    } else {
      top += allList[idx - 1].offsetHeight;
      itemArray.push(top);
    }
  });
  rightLiTops.value = itemArray;
};

watch(TreeData, () => {
  nextTick(() => {
    initRightHeight();
  });
});

const onScroll = () => {
  const itemListElement = itemList.value;
  if (itemListElement) {
    const scrollTop = itemListElement.scrollTop;
    const currentActiveIndex = rightLiTops.value.findIndex((top) => scrollTop < top);
    activeIndex.value = currentActiveIndex === -1 ? TreeData.value.length - 1 : currentActiveIndex - 1;
  }
};
onMounted(() => {
  itemList.value.addEventListener('scroll', onScroll);
});

</script>
<style scoped>
.top {
  --van-nav-bar-background: #ee7a06;
  --van-nav-bar-icon-color: #fff;
  --van-nav-bar-title-text-color: #fff;
  height: 100%;
  overflow-y:scroll;
}
ul{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}
.caidan{
  width: 100%;
  position: absolute;
  text-align: center;
  display: flex;
  top: 50px;
  bottom: 50px;

}
.one{
 width: 85px;
 background: #f3f5f7;
 flex: 0 0 78px;
 line-height: 52px;
 overflow-y: auto;
}
.one-ys{
  height: 52px;
  width: 100%;
  border-bottom: 1px solid #d3d1d1;
}
.one-ys.active {
  background-color: #ffffff;
}
.one-ys.active p{
  color: red;
}
.one-ys p{
font-size: 15px;
 width: 100%;
 margin: 0;
}

.two{
  overflow-y: auto;
  background: #fff;
  flex: 1;
  transition: transform 0.3s ease-in-out;
  padding:  0 0 470px 0;
}
.scroll-transition {
  transition: transform 0.3s ease-in-out; 
}
.two-ys {
  width: 100%;
}
.title{
  font-weight: bold;
  font-size: 15px;
  text-align: left;
  margin: 0;
  padding: 10px;
}
.two-item{
  display: flex;
  overflow: hidden;
  flex-flow: row wrap;
  padding: 8px 10px 10px;
}
.two-item li{
  width: 33.3%;
}
.img1{
  width: 100%;
}
.two-item img{
  width: 69px;
  height: 69px;
  
}
.two-p{
  display: inline-block;
  font-size: 14px;
  color: #3b3a3a;
}
</style>
